<template>
    <div class="local" style="background: #f4f4f4;">
        <DetailHead></DetailHead>
        <div class="personal-page">
    <div class="left-nav">
      <div class="nav-item active">我的主页</div>
    </div>

    <div class="right-content">
    <p style="font-size: 22px;">个人信息</p>
      <ul class="info-list">
        <li class="info-item">
          <span class="info-label">昵称</span>
          <button class="edit-btn" @click="openEditModal('nickname')">修改</button>
          <div class="nickname-display">
            <span>{{ userInfo.nickname || '未设置' }}</span>
          </div>
        </li>
        <li class="info-item">
          <span class="info-label">手机号</span>
          <button class="edit-btn" @click="openEditModal('phone')">修改</button>
          <div class="phone-display">
            <span>{{ userInfo.phone || '15733157238' }}</span>
          </div>
        </li>

        <li class="info-item">
          <span class="info-label">密码</span>
          <button class="edit-btn" @click="openEditModal('password')">修改</button>
          <div class="password-display">
            <span>******</span>
          </div>
        </li>
  
      <div class="avatar-container">
        <img 
          :src="userInfo.avatarUrl || defaultAvatar" 
          alt="用户头像" 
          class="avatar-img"
        >
        <button class="change-avatar" @click="handleChangeAvatar">
          <i style="margin-left: 15px;margin-top: 3px;">
            <svg viewBox="64 64 896 896" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 0 0-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg>
          </i><span style="margin-left: 5px;">更改头像</span></button>
      </div>
      </ul>
    </div>


    <a-modal 
      v-model="isModalVisible" 
      :title="getModalTitle()" 
      @ok="confirmEdit"
    >
      <div v-if="currentEditField === 'nickname'">
        <input 
          type="text" 
          v-model="tempValue" 
          placeholder="请输入新昵称"
          class="edit-input"
        >
      </div>
      <div v-if="currentEditField === 'phone'">
        <input 
          type="tel" 
          v-model="tempValue" 
          placeholder="请输入新手机号"
          class="edit-input"
          maxlength="11"
        >
      </div>
      <div v-if="currentEditField === 'password'">
        <input 
          type="password" 
          v-model="tempValue" 
          placeholder="请输入新密码"
          class="edit-input"
        >
      </div>
    </a-modal>
  </div>
        <FootView></FootView>
    </div>
</template>
<script>
import DetailHead from '@/components/DetailHead.vue'
import FootView from '@/components/FootView.vue'
import { mapState } from 'vuex' 

export default { 
  name: 'localView', 
  components: {
    DetailHead,
    FootView
  },
  data() { 
    return { 
      isModalVisible: false, 
      currentEditField: '', 
      tempValue: '',
      defaultAvatar: '' 
    } 
  }, 
  computed: { 
    ...mapState({ 
      userInfo: state => state.userInfo  
    }) 
  }, 
  methods: { 
    openEditModal(field) { 
      this.currentEditField = field 
      this.tempValue = field !== 'password' ? this.userInfo[field] || '' : '' 
      this.isModalVisible = true 
    }, 

    getModalTitle() { 
      const titles = { 
        nickname: '修改昵称', 
        phone: '修改手机号', 
        password: '修改密码' 
      } 
      return titles[this.currentEditField] || '编辑信息' 
    }, 

    confirmEdit() { 
      if (!this.tempValue.trim()) { 
        this.$message.warning('请输入内容后提交') 
        return 
      } 

      const updatedUserInfo = { ...this.userInfo } 
      updatedUserInfo[this.currentEditField] = this.tempValue 
      this.$store.commit('setUserInfo', updatedUserInfo) 
      this.$message.success('修改成功') 
      this.isModalVisible = false 
      this.tempValue = '' 
    }, 

    handleChangeAvatar() { 
      alert('请选择新头像') 
    } 
  } 
} 
</script>
<style scoped>
.personal-page {
    margin: 20px auto;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px;
    width: 1120px;
    height: 760px;
    display: flex;
}

.left-nav {
  width: 200px;
  padding-top: 30px;
  border-right: 1px solid #e0e0e0; 
  float: left;
}
.nav-item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: #333333;
}
.nav-item.active {
  background-color: #ffffff;
  color:  #00cf8c;;
  border-right: 3px solid #00cf8c;; 
}

.right-content {
  width: 993px;
  height: 721px;
  padding-left: 24px;
  margin-top: 30px;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 600px;
}
.info-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px dashed #e5e5e5;
  height: 122px;
}
.info-label {
  font-size: 20px;
  color: #333;
  line-height: 40px;
  margin-left: 40px;
}
.edit-btn {
  color: #23db9b;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
  margin-left: 20px;
}
.nickname-display {
    width: 100%;
    margin-top: 5px;
    margin-left: 40px;
    font-size: 20px;
    color: #333;
    line-height: 40px;
}
.phone-display {
    width: 100%;
    margin-top: 5px;
    margin-left: 40px;
    font-size: 20px;
    color: #333;
    line-height: 40px;
}
.password-display {
    width: 100%;
    margin-top: 5px;
    margin-left: 40px;
    font-size: 20px;
    color: #333;
    line-height: 40px;
}

.avatar-item {
  padding-left: 120px;
  border-bottom: none; 
}
.avatar-img {
  width: 200px; 
  height: 200px;
  margin-left: 20px;
  border: 1px solid #dddddd;
  margin-top: 20px;
}
.change-avatar {
  color: rgba(0, 0, 0, .65);
  background-color: #fff;
  height: 32px;
  font-size: 14px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 5px;
  width: 108px;
  border: 1px solid #d9d9d9;
}
.change-avatar:hover {
  color: #23db9b;
  border-color: #23db9b;
}

.edit-input {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
</style>